<template>
  <nav id="navbar" class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm shadow-sm z-40 transition-all duration-300">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-20">
        <!-- 品牌Logo -->
        <div class="flex items-center">
          <a href="#home" class="flex items-center">
            <i class="fa fa-paw text-primary text-2xl mr-2"></i>
            <span class="text-xl font-bold text-neutral">宠多多科技</span>
          </a>
        </div>

        <!-- 桌面端导航菜单 -->
        <div class="hidden md:flex space-x-8">
          <a href="#home" :class="[activeNavItem === 'home' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">首页</a>
          <a href="#about" :class="[activeNavItem === 'about' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">关于我们</a>
          <a href="#market-trends" :class="[activeNavItem === 'market-trends' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">行业趋势</a>
          <a href="#services" :class="[activeNavItem === 'services' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">服务项目</a>
          <a href="#advantages" :class="[activeNavItem === 'advantages' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">公司优势</a>
          <a href="#contact" :class="[activeNavItem === 'contact' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">联系我们</a>
          
          <!-- CTA Button -->
          <button class="bg-primary text-white px-4 py-2 rounded-lg shadow hover:bg-primary/90 transition-colors mr-2">
            立即咨询
          </button>
          <button 
            class="bg-white border border-primary text-primary px-4 py-2 rounded-lg shadow hover:bg-primary/5 transition-colors"
            @click="openQRScanner"
          >
            <i class="fa fa-qrcode mr-1"></i> 扫一扫
          </button>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <div class="md:hidden flex items-center space-x-2">
          <button 
            class="text-gray-600 hover:text-primary focus:outline-none p-2"
            @click="openQRScanner"
          >
            <i class="fa fa-qrcode text-xl"></i>
          </button>
          <button type="button" class="text-gray-600 hover:text-primary focus:outline-none p-2" @click="toggleMenu">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- Mobile Menu -->
    <div v-if="mobileMenuOpen" class="md:hidden bg-white border-t border-gray-200 shadow-lg">
      <div class="container mx-auto px-4 py-4">
        <div class="flex flex-col space-y-4">
          <a href="#home" @click="closeMenu" :class="[activeNavItem === 'home' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">首页</a>
          <a href="#about" @click="closeMenu" :class="[activeNavItem === 'about' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">关于我们</a>
          <a href="#market-trends" @click="closeMenu" :class="[activeNavItem === 'market-trends' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">行业趋势</a>
          <a href="#services" @click="closeMenu" :class="[activeNavItem === 'services' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">服务项目</a>
          <a href="#advantages" @click="closeMenu" :class="[activeNavItem === 'advantages' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">公司优势</a>
          <a href="#contact" @click="closeMenu" :class="[activeNavItem === 'contact' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">联系我们</a>
          
          <!-- Mobile CTA Button -->
          <a href="#contact" @click="closeMenu" class="block text-center px-5 py-3 bg-primary text-white font-medium rounded-lg shadow-md hover:bg-primary/90 transition-colors">
            立即咨询
          </a>
        </div>
      </div>
    </div>
  </nav>
  
  <!-- QR码扫描器 -->
  <QRCodeScanner
    v-if="showQRScanner"
    @scan-result="handleScanResult"
    @close="closeQRScanner"
  />
</template>

<script>
import QRCodeScanner from './QRCodeScanner.vue'

export default {
  name: 'Navbar',
  components: {
    QRCodeScanner
  },
  props: {
    activeNavItem: {
      type: String,
      default: 'home'
    }
  },
  data() {
    return {
      mobileMenuOpen: false,
      showQRScanner: false
    },
  mounted() {
    // 监听屏幕尺寸变化，在大屏幕时自动关闭移动菜单
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>  methods: {
    toggleMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen
      
      // 切换body滚动
      if (this.mobileMenuOpen) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = ''
      }
    },
    
    closeMenu() {
      this.mobileMenuOpen = false
      document.body.style.overflow = ''
    },
    
    handleResize() {
      if (window.innerWidth >= 768) {
        this.closeMenu()
      }
    },
    
    openQRScanner() {
      this.showQRScanner = true
    },
    
    closeQRScanner() {
      this.showQRScanner = false
    },
    
    handleScanResult(result) {
      console.log('扫描结果:', result)
      // 这里可以处理扫描结果，例如跳转到相应页面或显示内容
      alert(`扫描成功！结果: ${result}`)
    }
  }
}
</script>

<style scoped>
/* 导航栏滚动效果 */
#navbar {
  transition: all 0.3s ease;
}

#navbar.scrolled {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 导航项动画 */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* 移动端菜单动画 */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CTA按钮悬停效果 */
.cta-button {
  transition: all 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
}
</style>